<template>
    <div
        class="p-6 bg-white rounded-lg shadow-lg flex-col flex gap-4 group"
    >
        <div class="flex justify-between items-center">
            <div class="font-bold">第{{ nthWeek }}周</div>
            <div class="text-lg">{{ month }}</div>
        </div>
        <div class="justify-between flex gap-2 overflow-x-clip">
            <div
                v-for="i in dayjs.weekdays()"
                :class="curDay === day ? 'bg-green-700 text-white' : 'bg-gray-200 text-gray-700 hover:text-green-700 hover:bg-green-200'"
                class="rounded-md font-bold p-4 w-10 h-10 justify-center items-center text-sm flex transition-all duration-300 hover:scale-110 cursor-pointer"
            >{{ i.slice(2) }}</div>
        </div>
        <div class="justify-between flex gap-2 overflow-x-clip">
            <div
                v-for="day in days"
                :class="curDay === day ? 'bg-green-700 text-white' : 'bg-gray-200 text-gray-700 hover:text-green-700 hover:bg-green-200'"
                class="rounded-full p-4 w-10 h-10 justify-center items-center text-sm flex transition-all duration-300 hover:scale-110 cursor-pointer"
            >{{ day }}</div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import  dayjs from 'dayjs'
import weekOfYear from 'dayjs/plugin/weekOfYear'
import localeData from 'dayjs/plugin/localeData'
import 'dayjs/locale/zh-cn'
dayjs.extend(weekOfYear)
dayjs.extend(localeData)

dayjs.locale('zh-cn')

const nthWeek = dayjs().week() - dayjs('2022-02-21').week() + 1
const month = dayjs.months()[dayjs().month()]

const days = []
const curDay = parseInt(dayjs().format('DD'))
let cur = dayjs().startOf('week').subtract(1,'day')
let end = dayjs().endOf('week').subtract(1,'day')
while (!cur.isAfter(end, 'day')) {
    days.push(parseInt(cur.format('DD')))
    cur = cur.add(1, 'day')
}

let isOpen = ref(false)

</script>